<template>
  <div class="layout">
    <h-menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
      <div class="layout-logo-left"></div>

      <h-submenu name="user">
        <template v-slot:title>
          <h-icon name="people_fill"></h-icon>
          用户管理
        </template>
        <h-menu-item name="register">
          <router-link to="/user/register">开户</router-link>
        </h-menu-item>
        <h-menu-item name="userInfo">
          <router-link to="/user/info">客户信息维护</router-link>
        </h-menu-item>
      </h-submenu>

      <h-submenu name="product">
        <template v-slot:title>
          <h-icon name="manage_fill"></h-icon>
          产品管理
        </template>
        <h-menu-item name="productInfo">
          <router-link to="/product/info">产品信息维护</router-link>
        </h-menu-item>
      </h-submenu>

      <h-submenu name="trade">
        <template v-slot:title>
          <h-icon name="barrage_fill"></h-icon>
          交易管理
        </template>
        <h-menu-item name="subscribe">
          <router-link to="/trade/subscribe">申购</router-link>
        </h-menu-item>
        <h-menu-item name="redeem">
          <router-link to="/trade/redeem">赎回</router-link>
        </h-menu-item>
      </h-submenu>

      <h-submenu name="recharge">
        <template v-slot:title>
          <h-icon name="cash"></h-icon>
          充值
        </template>
        <h-menu-item name="recharge">
          <router-link to="/bank/recharge">虚拟充值</router-link>
        </h-menu-item>
      </h-submenu>

      <h-submenu name="liquidation">
        <template v-slot:title>
          <h-icon name="dynamic_fill"></h-icon>
          清算
        </template>
        <h-menu-item name="liquidation">
          <router-link to="/liquidation/liquidation">清算</router-link>
        </h-menu-item>
      </h-submenu>

      <h-submenu name="order">
        <template v-slot:title>
          <h-icon name="order_fill"></h-icon>
          业务查询
        </template>
        <h-menu-item name="order">
          <router-link to="/order/order">业务查询</router-link>
        </h-menu-item>
      </h-submenu>
    </h-menu>
  </div>
</template>
  
  <script>
export default {
  name: "sideBar",
};
</script>
  
<style lang="less" scoped>
.h-menu-vertical {
  height: 91vh;
  overflow-y: auto;
}

.h-menu-item-active {
  > a {
    color: #fff;
  }
}

.layout-content {
  height: calc(100vh - 30px);
}

.layout-content-main {
  padding: 24px;
}

.layout-footer {
  text-align: center;
  height: 30px;
}

router-link {
  width: 100%;
  height: 100%;
  color: #fff;
}

a {
  color: #fff;
}
</style>